import React, { Component } from 'react';
import { Carousel, Button, Row, Col, } from 'antd';
import './Home.less';

export default class Home extends Component {
  onChange(index) {
    // console.log(index);
  }

  render() {
    return (
      <div className="block-home">
        <Carousel className="carousel-top" autoplay afterChange={this.onChange}>
          <div className="slide-item">
            <img alt="banner" src={ require('./../img/banner/1.png') } />
            <article>
              <h3>云聚智慧，创新未来</h3>
              <p>全新的云服务运营及管理平台，助力企业飞速发展</p>
              <Button size="large" ghost>立即试用</Button>
            </article>
          </div>
          <div className="slide-item">
            <img alt="banner" src={ require('./../img/banner/2.png') } />
            <article>
              <h3>云聚智慧，创新未来</h3>
              <p>全新的云服务运营及管理平台，助力企业飞速发展</p>
              <Button size="large" ghost>立即试用</Button>
            </article>
          </div>
          <div className="slide-item">
            <img alt="banner" src={ require('./../img/banner/1.png') } />
            <article>
              <h3>云聚智慧，创新未来</h3>
              <p>全新的云服务运营及管理平台，助力企业飞速发展</p>
              <Button size="large" ghost>立即试用</Button>
            </article>
          </div>
          <div className="slide-item">
            <img alt="banner" src={ require('./../img/banner/2.png') } />
            <article>
              <h3>云聚智慧，创新未来</h3>
              <p>全新的云服务运营及管理平台，助力企业飞速发展</p>
              <Button size="large" ghost>立即试用</Button>
            </article>
          </div>
        </Carousel>

        <Row className="row-brief">
          <Col span={6} className="row-item">
            <img alt="banner" src={ require('./../img/banner/1.png') } />
            <article>
              <h6>面向企业</h6>
              <p>专业服务企业用户，按照企业组织结构<br/>和流程定制资源部署方案</p>
            </article>
          </Col>
          <Col span={6} className="row-item">
            <img alt="banner" src={ require('./../img/banner/2.png') } />
            <article>
              <h6>成本透明</h6>
              <p>实时了解资源利用率并进行成本分析，<br/>帮助企业进行IT成本管控</p>
            </article>
          </Col>
          <Col span={6} className="row-item">
            <img alt="banner" src={ require('./../img/banner/1.png') } />
            <article>
              <h6>开源开放</h6>
              <p>基于OpenStack开源技术和架构，<br/>开放API接口，集成第三方产品服务</p>
            </article>
          </Col>
          <Col span={6} className="row-item">
            <img alt="banner" src={ require('./../img/banner/2.png') } />
            <article>
              <h6>可视易用</h6>
              <p>简明清晰的可视化订购、部署和管理界<br/>面实现各类资源服务的高可用性</p>
            </article>
          </Col>
        </Row>

        <div className="wrap-intro">
          <Row className="row-slogan">
            <Col span={24}>
              <h5>全新的云计算产品</h5>
              <p>计算、存储、网络、安全、大数据、人工智能，助力企业从传统IT逐步走向混合IT的飞跃发展</p>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <i className="icon icon-jisuan"></i>
              <p><strong>云主机</strong><br/>为您提供一种随时获取的、弹性可扩展的计算能力，<br/>包括：镜像和云主机</p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
            <Col span={8}>
              <i className="icon icon-cunchu"></i>
              <p><strong>块存储</strong><br/>块级的原始存储设备，<br/>包括：硬盘、共享存储、文件存储、对象存储和快照备份</p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
            <Col span={8}>
              <i className="icon icon-wangluo"></i>
              <p><strong>对象存储</strong><br/>安全隔离，灵活配置，高可用，低成本<br/>包括：私有网络、路由器、公网IP、负载均衡</p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <i className="icon icon-shujuku"></i>
              <p><strong>VPC网络</strong><br/>为您提供主流的数据库与缓存服务，<br/>包括：关系型数据库 RDB、MongoDB 和 缓存 Cache</p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
            <Col span={8}>
              <i className="icon icon-anquan"></i>
              <p><strong>关系型数据库</strong><br/>更智能的加强资源和数据的安全性。<br/>包括：防火墙和SSH密钥</p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
            <Col span={8}>
              <i className="icon icon-jiankong"></i>
              <p><strong>防火墙</strong><br/>简单方便的实现对资源的部署、管理与监控，<br/>包括：资源编排. </p>
              <Button type="primary" ghost>立即购买</Button>
            </Col>
          </Row>

          <Row className="row-btn">
            <Col span={24}>
              <Button type="primary" size="large">查看全部</Button>
            </Col>
          </Row>
        </div>

        <Carousel className="carousel-bottom" autoplay>
          <Row>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/3.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/4.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/5.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/5.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/4.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/3.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/4.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/5.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
            <Col span={8}>
              <img alt="banner" src={ require('./../img/banner/3.png') } />
              <article>
                <h6>互联网应用 </h6>
                <p>满足各种部署需求运行环境，部署方便， 使用安全，提升效率</p>
                <Button>立即选购</Button>
                <i className="icon icon-arrow-right-o"></i>
              </article>
            </Col>
          </Row>
        </Carousel>

        <div className="wrap-service">
          <Row className="row-slogan">
            <Col span={24}>
              <h5>满足各行业苛刻的软件和服务要求</h5>
            </Col>
          </Row>
          <Row className="row-service">
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-hulianwang"></i>
                <p>互联网应用</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-hulianwang"></i>
                <h6>互联网应用</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-dashuju"></i>
                <p>大数据</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-dashuju"></i>
                <h6>大数据</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-youxi"></i>
                <p>游戏</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-youxi"></i>
                <h6>游戏</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
          </Row>          
          <Row className="row-service">
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-wulianwang"></i>
                <p>物联网</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-wulianwang"></i>
                <h6>物联网</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-yidong"></i>
                <p>移动端开发</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-yidong"></i>
                <h6>移动端开发</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
            <Col span={8}>
              <div className="col-item">
                <i className="icon icon-xietong"></i>
                <p>协同工作</p>
              </div>
              <div className="col-item-active">
                <i className="icon icon-xietong"></i>
                <h6>协同工作</h6>
                <p><span>数据分析</span>|<span>销售管理</span>|<span>企业服务</span></p>
                <p><span>协同办公</span>|<span>人事管理</span>|<span>财务管理</span></p>
                <p><span>企业服务</span></p>
              </div>
            </Col>
          </Row>
          <Row className="row-btn">
            <Col span={24}>
              <Button type="primary" size="large">更多产品</Button>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
